<template>
    <view class="page-wrap">
        <view class="attend-main">
            <view class="list-item">
                <image src="https://q8.itc.cn/q_70/images03/20240223/e60bf93ead7842baa5a3b5284b4a23eb.jpeg" mode="aspectFill" class="item-img" />

                <!-- footer -->
                <view class="item-f-wrap">
                    <view>
                        <view class="item-title">活动名称活动名称</view>
                        <view class="item-info">
                            <image src="https://ww4.sinaimg.cn/mw690/005NYbuhgy1hrrh8coxjmj30yh1nf7es.jpg" mode="aspectFill" class="item-avatar" />
                            <view class="item-name">用户昵称</view>
                        </view>
                    </view>
                    <image src="https://ww1.sinaimg.cn/mw690/007tLi2uly1hqif2lg76fj30j60sodj9.jpg" mode="aspectFill" class="item-code" />
                </view>
            </view>
            <view class="but-wrap">
                <view class="but-selected" @tap="selectedPhoto">选择照片</view>
                <view class="but-confirm">确认参与</view>
            </view>
        </view>
    </view>
</template>

<script setup>
const selectedPhoto = () => {
    uni.chooseImage({
        count: 1,
        sourceType: ['album'], //从相册选择
        success: function (res) {
            console.log(res.tempFilePaths);
        },
    });
};
</script>

<style lang="scss" scoped>
.page-wrap {
    padding: 30rpx;
    box-sizing: border-box;
    min-height: 100vh;
    background: rgba(234, 85, 6, 1);
    .attend-main {
        padding: 30rpx 30rpx 40rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #fff;
        border-radius: 20rpx;
        height: 1200rpx;
        .list-item {
            position: relative;
            width: 100%;
            height: 950rpx;
            border-radius: 15rpx;
            overflow: hidden;
            .item-img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
            }
            .item-f-wrap {
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 9;
                padding: 0 20rpx 20rpx;
                color: #fff;
                .item-title {
                    margin-bottom: 10rpx;
                    font-size: 33rpx;
                }
                .item-info {
                    display: flex;
                    align-items: center;
                    gap: 0 5rpx;
                    .item-avatar {
                        width: 50rpx;
                        height: 50rpx;
                        border-radius: 50%;
                        border: 1rpx solid #fff;
                    }

                    .item-name {
                        flex: 1;
                        font-size: 28rpx;
                    }
                }
                .item-code {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                    border: 1rpx solid #fff;
                }
            }
            .item-like {
                padding: 5rpx 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 0 10rpx;
                position: absolute;
                top: 15rpx;
                left: 15rpx;
                z-index: 9;
                background: rgba(234, 85, 6, 1);
                border-radius: 10rpx;
                font-size: 24rpx;
                color: #fff;
                .icon-like {
                    width: 25rpx;
                    height: 25rpx;
                }
            }
        }
    }
    .but-wrap {
        display: flex;
        gap: 0 20rpx;
        .but-selected,
        .but-confirm {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 90rpx;
            font-size: 30rpx;
            border-radius: 10rpx;
        }
        .but-selected {
            background: rgba(234, 85, 6, 0);
            border: 1px solid rgba(234, 85, 6, 1);
            color: rgba(234, 85, 6, 1);
        }
        .but-confirm {
            color: #fff;
            background: rgba(234, 85, 6, 1);
        }
    }
}
</style>
